import React from "react";
import { RouteRowState } from "../types";
import { UserO, HomeO, CartO, OrdersO } from "@react-vant/icons";

const Home = React.lazy(() => import("../views/home"));
const My = React.lazy(() => import("../views/my"));
const Classify = React.lazy(() => import("../views/classify"));
const Car = React.lazy(() => import("../views/car"));
const MainLayout = React.lazy(() => import("../views/mainLayout"));

const Detail = React.lazy(() => import("../views/detail"));
const Login = React.lazy(() => import("../views/login"));
const Order = React.lazy(() => import("../views/order"));
const OrderList = React.lazy(() => import("../views/orderList"));
const PayResult = React.lazy(() => import("../views/payResult"));
const Search = React.lazy(() => import("../views/search"));

export const CHILDREN_ROUTER_LIST: RouteRowState[] = [
  {
    path: "/",
    title: "首页",
    icon: <HomeO />,
    element: <Home></Home>,
  },
  {
    path: "/classify",
    title: "分类",
    icon: <OrdersO />,
    element: <Classify></Classify>,
  },
  {
    path: "/friend",
    title: "米圈",
    icon: <img src={require('../assets/images-home/friend.png')} alt="" className="animate" />,
    element: <div>米圈路由</div>,
  },
  {
    path: "/car",
    title: "购物车",
    icon: <CartO />,
    element: <Car></Car>,
  },
  {
    path: "/my",
    title: "我的",
    icon: <UserO />,
    element: <My></My>,
  },
];

export const ROUTER_LIST: RouteRowState[] = [
  {
    path: "/",
    element: <MainLayout></MainLayout>,
    children: CHILDREN_ROUTER_LIST,
  },
  {
    path: "/detail/:id",
    element: <Detail></Detail>,
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/order/:id",
    element: <Order></Order>,
    authLogin: true,
  },
  {
    path: "/order/list",
    element: <OrderList></OrderList>,
    authLogin: true,
  },
  {
    path: "/pay/result",
    element: <PayResult></PayResult>,
  },
  {
    path: "/search",
    element: <Search></Search>,
  },
];
